<template>
	<view class="home">
		<custom-navbar title="找厂房" :show-back="true" @back="handleBack" />

		<view class="content " :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="search mb37 p0030">
				<view class="box fcc mb30 p016016">
					<up-search shape="square" placeholder="请输入政策名称" v-model="keyword" :showAction="false"></up-search>
					<up-button type="primary" @click="getProductName()"
						style="width: 140rpx;height: 60rpx;background: #398DFB;border-radius: 10rpx 10rpx 10rpx 10rpx;"
						text="确定"></up-button>
				</view>
				<view class="flex">
					<view v-for='(item,index) in data16' class="typelist fcolcc" style="margin-right: 67rpx;">
						<view class="f30bc3" :class="space_class == item.value ? 'c398DFB' :''"
							@click="Switchingsupply_demand(item.value)">
							{{item.label}}
						</view>
						<view :class="space_class == item.value ? 'underline' :''"></view>
					</view>
				</view>
			</view>

			<view class="supplyList  p0030">
				<view class="item mb20" v-for="(item,index) in  homeData" :key="index" @click="handledetails(item)">
					<view class="bg">
						<image class="plantbg" :src='item.space_image'></image>
						<view class="top fcc">
							<image class="rentout" :src="cdn('仅出租.svg')"></image>
							<view v-if="item.rent_nature == 18" class="text f22bc99A2E">
								仅出租
							</view>
							<view v-else class="text f22bc99A2E">
								仅出售
							</view>
						</view>
					</view>
					<view class="btm p30">
						<view class="f36bc0 mb18">{{item.space_title}}</view>
						<view class="flex mb30">
							<view class="f245c9 fc ">
								<view>租价:</view>
								<view class="FF0C10">{{item.rent_price}}</view>
							</view>
							<view class="f245c9 fc ml30">
								<view>建筑面积：</view>
								<view class="c398DFB">{{item.building_area}}</view>
							</view>
						</view>
						<up-line></up-line>
						<view class="fcsb mt18">
							<view class="f245c9">{{item.address}}</view>
							<view class="btn f20bcf fcc">预约考察</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		SpaceLists
	} from '@/api/plant'
	import {
		getClassification
	} from '@/api/login'
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const data16 = ref([])
	const loading = ref(false)
	// 单独请求 getClassification(16) 接口
	const fetchData = async () => {
		try {
			loading.value = true
			const res = await getClassification(14)
			data16.value = res.data
			space_class.value = data16.value[0]?.value || '' // 添加可选链操作符防止undefined
			getSpaceLists()
		} catch (error) {
			console.error('请求分类数据失败:', error)
			uni.showToast({
				title: '加载分类失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}
	onMounted(fetchData)
	// 获取list列表
	const homeData = ref([])
	const page = ref(1)
	const limit = ref(10)
	const keyword = ref('')
	const space_class = ref('')
	const getSpaceLists = async () => {

		try {
			const params = {
				lang_code: 'zh', // 确保 lang_code 正确传递
				space_class: space_class.value,
				space_title: keyword.value
			}
			console.log('请求参数:', params) // 调试用
			const Res = await SpaceLists(params)

			if (Res.code === 200) { // 注意这里是 ===，不是 =
				homeData.value = Res.data.data
			}
		} catch (error) {
			console.error('获取供需列表失败:', error)
		}
	}

	const Switchingsupply_demand = (val) => {
		space_class.value = val
		getSpaceLists()
	}
	// 搜索名称
	const getProductName = () => {
		getSpaceLists()
	}
	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
	const handledetails = (item) => {
		// uni.navigateTo({
		// 	url: `/pages/plant/details`
		// });
		uni.navigateTo({
			url: `/pages/plant/details?space_id=${item.space_id}`
		})
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-content: center;

			.search {
				width: 100%;
				// height: 130rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 16rpx 30rpx 24rpx 30rpx;

				.box {
					width: 100%;
					height: 90rpx;
					background: #F3F3F3;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.typelist {
					position: relative;

					.underline {
						width: 40rpx;
						height: 4rpx;
						background: #398DFB;
						border-radius: 500rpx 500rpx 500rpx 500rpx;
						position: absolute;
						bottom: -23rpx;
						// left: 0;
					}
				}
			}

			.classify {
				width: 100%;
			}

			.supplyList {
				.item {
					background: #FFFFFF;

					.bg {
						width: 100%;
						height: 320rpx;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						position: relative;

						.plantbg {
							border-radius: 20rpx 20rpx 0rpx 0rpx;
							position: absolute;
							width: 100%;
							height: 100%;
						}

						.top {
							position: absolute;
							right: 30rpx;
							width: 100rpx;

							.rentout {
								width: 100rpx;
								height: 94rpx;
							}

							.text {
								position: absolute;
								top: 44rpx;
							}
						}

					}
				}
			}
		}
	}
</style>